<!--弹出框-->
<template>
  <!--     弹出框弹出框-->
  <el-dialog :visible.sync="dialogVisible" center width="600px">
    <div class="dialog_content">
      <div class="dialog_title">新增收货地址</div>
      <el-form
        ref="dialogFrom"
        :model="dialogDate"
        :rules="rules"
        label-width="180px"
      >
        <el-form-item label="用户名：" prop="userName">
          <el-col :span="12">
            <el-input
              v-model="dialogDate.userName"
              placeholder="请输入用户名"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="收货人：" prop="consignee">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model="dialogDate.consignee"
                placeholder="请输入收货人"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="联系方式：" prop="contact">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model.number="dialogDate.contact"
                placeholder="请输入联系方式"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="收货地址：" prop="address">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model="dialogDate.address"
                placeholder="请输入收货地址"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="关联仓库：" prop="warehouse">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model="dialogDate.warehouse"
                placeholder="请输入关联仓库"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="绑定配送员：" prop="courier">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model="dialogDate.courier"
                placeholder="绑定配送员"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="默认数：" prop="defaultNumber">
          <el-row>
            <el-col :span="12">
              <el-input
                v-model.number="dialogDate.defaultNumber"
                placeholder="默认数"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="是否默认：" prop="isDefault">
          <el-switch
            v-model="dialogDate.isDefault"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="margin-left: 10px">
            {{ dialogDate.isDefault ? "是" : "否" }}
          </span>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-switch
            v-model="numlock"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeStatus"
          >
          </el-switch>
          <span style="margin-left: 10px">
            {{ dialogDate.status === 0 ? "待审阅" : "已审核" }}
          </span>
        </el-form-item>
      </el-form>
    </div>

    <div class="dialog_footer">
      <el-button @click="offDialog">取 消</el-button>
      <el-button type="primary" @click="dialogAdd">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import getTime from "@/utils/getTime";

export default {
  data() {
    return {
      numlock: false, // 开关变量
      // 表单数据
      dialogDate: {
        addressId: 41960,
        userName: "",
        consignee: "", // 收货人
        contact: "",
        address: "思明区观日路18号",
        warehouse: "软件园二期仓库",
        courier: "", // 配送员
        defaultNumber: 1, // 默认数
        isDefault: false,
        status: 0, // 0：待审核，1：已审核
        updateTime: getTime(),
      },
      dialogVisible: false, // 弹窗控制变量
      rules: {
        consignee: [
          { required: true, message: "收货人不能为空", trigger: "blur" },
        ],
        contact: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          { type: "number", message: "联系方式只能是数字", trigger: "change" },
        ],
        address: [
          { required: true, message: "收货地址不能为空", trigger: "blur" },
        ],
        warehouse: [
          { required: true, message: "关联地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 滑块值改变时间回调
    changeStatus(val) {
      if (val) {
        this.dialogDate.status = 1;
      } else {
        this.dialogDate.status = 0;
      }
    },
    // 清空
    removeAll() {
      // 重置表单
      this.$refs.dialogFrom.resetFields();
    },
    // 新增
    dialogAdd() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          if (this.dialogDate.consignee === "") {
            this.dialogDate.consignee = "——";
          }
          if (this.dialogDate.userName === "") {
            this.dialogDate.userName =
              "(订水用户" + this.dialogDate.contact + ")";
          }
          // 将数据传递至父组件
          that.$emit("addList", JSON.stringify(this.dialogDate));
          // 关闭弹窗
          that.offDialog();
        } else {
          return false;
        }
      });
    },
    // 结束清空弹窗数据，关闭弹窗
    offDialog() {
      // 回复初始值
      this.removeAll();
      this.numlock = false;
      // 关闭弹窗
      this.dialogVisible = false;
    },

    // 开启弹窗，判断是新增还是修改事件
    showDialog() {
      // 开启弹窗
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body,
/deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}

.form_btn .el-button {
  font-size: 28px;
  margin-left: 15px;
}
</style>
